<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title></title>
    <style>
        *{margin: 0;padding: 0;}
        html,body{
            height: 100%;
        }
        #t_wrap{max-width:640px;height: 100%;background-image: url(img/bg.png);background-color: #0B1E37;position: relative;/*transform-style: preserve-3d;*/}
        #t_logo{position: absolute;top: 2%;left: 5%;}
        #t_turntable{position: absolute;top: 15%;left: 8%;
            width: 84%;
        }
        #t_turntable>img{
            width: 100%;
        }
        #t_way{width: 100%;height: 100%;background-color: rgba(0,0,0,0);border-radius: 50%;/*-webkit-transform: rotate(0deg);*/
            position: absolute;
            left: 0;
            top: 0;
        }
        #t_car{position: absolute;top: 53%;left: -4%; width: 22%;}
        #t_btn{width: 30%;height: 30%;background: url(img4/btn_bg.png);position: absolute;top: 35%;left: 35%;z-index: 1;
            -webkit-background-size: 100% 100%;
            background-size: 100% 100%;
        }
        #t_btn img{position: absolute;top: 30%;left: 15%; width: 70%;}
    </style>
</head>
<body>
<div id="t_wrap">
    <img src="img/logo.png" alt="" id="t_logo" />
    <div id="t_turntable">
        <img src="img4/zhuanpan.png" alt="" />
        <div id="t_btn"><img src="img4/go.png" alt="" /></div>
        <div id="t_way"><img src="img4/car.png" alt="" id="t_car" /></div>
    </div>
</div>

<script>
    var start = document.getElementById("t_btn");
    var way = document.getElementById("t_way");
    //第一种,从后台获取到中奖结果后再开始转
    start.addEventListener("touchstart",function () {
       /*
        $.ajax({
            url:xx.php,
            success:function (data) {

            }
        })*/
       var num = 3;
        var deg = 0;
        var timer = setInterval(function () {
            deg++;
            way.style.transform = "rotate("+deg+"deg)";
            if(deg>=720){
                if(deg%360==360/8*num){
                    clearInterval(timer);
                }
            }
        },20);
    },false);

</script>
</body>

</html>